<template>
  <nav class="site-navbar">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand">
        <a class="site-navbar__brand-lg" href="javascript:;">后台管理系统</a>
        <a class="site-navbar__brand-mini" href="javascript:;">系统</a>
      </h1>
    </div>
    <div class="site-navber_containter clearfix">
        <ul class="sidebar-switch clearfix">
          <li><a href="javascript:;" v-if="sidebarTool ==1"><i class="el-icon-s-fold"></i></a></li>
          <li><a href="javascript:;" v-if="sidebarTool ==0"><i class="el-icon-s-unfold"></i></a></li>
        </ul>
    </div>
  </nav>
</template>

<script>
  export default {
    data () {
      return {
        sidebarTool:1
      }
    },
    
  }
</script>
<style  scoped lang="less">
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.site-navbar{
    position: fixed;
    z-index: 4;
    width: 100%;
    .site-navbar__header{
        position: relative;
        top: 0;
        left: 0;
        float: left;
        width: 180px;
        padding: 0 20px;
        text-align: center;
        background: #17b3a3;
        color: #fff;
        .site-navbar__brand{
          line-height: 50px;
          font-size: 20px !important;
        }
        a{
            text-decoration: none;
            color: #fff;
        }
    }
    .site-navber_containter{
      position: relative;
      top: 0;
      height: 50px;
      margin-left: 220px;
      padding: 0 12px;
      box-shadow: 3px -1px 8px 0px #b5b5b5;
      ul{
        list-style:none;
        li{
          float: left;
        }
      }
      .sidebar-switch{
        float: left;
        li{
          line-height: 50px;
        }
        i{
          font-size: 26px;
          color: #525458;
          line-height: 50px;
          font-weight: 100;
        }
      }
      .site-navber_tool{
        float: right;
      }
    }
}
</style>